@extends('admin.layouts.master')

@section('content')

<div class="row aw-list">
	<div class="col-lg-12">
		<section class="panel aw-content">
			<header class="panel-heading">日历浏览模式</header>
			<div class="aw-mt20 overflow-hidden">
				<div class="col-sm-6 col-md-4 form-group overflow-hidden">
					<div class="col-xs-4 aw-p0 aw-list-input-title">月份选择：</div>
					<div class="col-xs-8 aw-p0">
						<select placeholder="请选择月份" id="month" name="month" v-model="form.month" :value="form.month" class="form-control">
							<option v-for="(list,key) in list_month" :value="list.month">@{{list.month_text}}</option>
						</select>
					</div>
				</div>
				<div class="col-sm-6 col-md-4 form-group overflow-hidden">
					<div class="col-xs-4 aw-p0 aw-list-input-title">店面：</div>
					<div class="col-xs-8 aw-p0">
						<select placeholder="请选择店面" id="store_id" name="store_id" v-model="form.store_id" :value="form.store_id" class="form-control">
							<option v-for="(list,key) in list_store" :value="list.id">@{{list.store_name}}</option>
						</select>
					</div>
				</div>
				<div class="col-sm-6 col-md-4 form-group overflow-hidden">
					<div class="col-xs-4 aw-p0 aw-list-input-title">场地选择：</div>
					<div class="col-xs-8 aw-p0">
						<select placeholder="请选择场地类型" id="field_id" name="field_id" v-model="form.field_key" :value="form.field_key" class="form-control">
							<option v-for="(list,key) in list_field_type" :value="key+1" :data-type_text="list.type_text" :data-type="list.type" :data-id="list.id">@{{list.type_text}} (@{{list.number}}号)</option>
						</select>
					</div>
				</div>
				<!--<div class="col-sm-6 col-md-4 form-group overflow-hidden">
					<div class="col-xs-4 aw-p0 aw-list-input-title">时段选择：</div>
					<div class="col-xs-8 aw-p0">
						<select placeholder="请选择时段" id="time" name="time" v-model="form.time" :value="form.time" class="form-control">
							<option value="">请选择</option>
							<option v-for="(list,key) in list_time" :value="list.start_time">@{{list.time}}</option>
						</select>
					</div>
				</div>-->
				<div class="col-sm-6 col-md-4 form-group overflow-hidden">
					<a class="btn btn-green" v-on:click="List_Search()"><i class="icon-search"></i> 搜索</a>
					<a href="/admin/field/calendar?page_id=24" class="btn btn-gray"><i class="icon-refresh"></i> 重置</a>
				</div>
			</div>
			<ul class="aw-calendar-list aw-calendar-tab" v-if="lists_data.length > 0">
				<li class="aw-calendar-li" v-for="(list,key) in lists" v-if="key < 7">周@{{list.week}}</li>
			</ul>
			<ul class="aw-calendar-list aw-calendar-body" v-if="lists_data.length > 0">
				<li class="aw-calendar-li" v-for="(list,key) in lists">
					<p>@{{list.day}}</p>
					<p>@{{lists_data.store_name}}</p>
					<p>@{{lists_data.type_text_num}}场地</p>
					<ul class="aw-calendar-li-time-list">
						<li class="aw-calendar-time-li" v-for="(li,key) in list.list">@{{li.start_time}}-@{{li.end_time}} ￥@{{li.price}} <span v-html="Field_Status(li.lock,li.order_id,li.status)"></span></li>
					</ul>
				</li>
			</ul>
			<div class="aw-text-center aw-list-null" v-if="lists_data.length==0&&lists_data.dev==1">暂无场地价格设置</div>
			<div class="aw-text-center aw-list-null" v-if="lists_data.dev==0">请选择条件搜索</div>
		</section>
	</div>
</div>

@section('pagejs')
@parent

<script type="text/javascript">
var MJS_URLArry=URLArry;
var myDate = new Date();
var Get_form={
	page_id:24,month:myDate.getMonth()+1,store_id:'',type:'',time:'',id:'',field_key:0,
}
$.extend(Get_form,MJS_URLArry);
//门店 
var AD_list_store={
	api:'/adminapi/storefront/list',
	form_data:{page_num:100},
	tips:false,
}
//场地类型
var AD_list_field_type={
	api:'/adminapi/field/list',
	form_data:{page_num:100},
	tips:false,
}
//价格列表
var AD_list={
	api:'/adminapi/field/calendar',
	form_data:Get_form,
	tips:false,
}
var Ajax_Vue_Fun_Store=function(vue_data){
	vm=new Vue({
		el:'#Vue-Body',
		data:{
			lists:{},
			lists_data:{store_name:'',type_text_num:'',length:0,dev:0},
			list_store:vue_data.list,
			list_field_type:{},
			list_month:Data_month_list,
			list_time:Data_field_time_list,
			form:Get_form,
		},methods:{
			Field_Status:function(lock,order_id,status){
				if(status==1){
					return '<span class="btn btn-green btn-xs aw-m0">空位</span>';
				}else if(status==2){
					return '<span class="btn btn-gules btn-xs aw-m0">已预定</span>';
				}else if(status==3){
					return '<span class="btn btn-gray btn-xs aw-m0">锁定</span>';
				}
			},Ad_List_Form(){
				AD_list.form_data.month=vm.form.month;
				AD_list.form_data.store_id=vm.form.store_id;
				if(!this.form.id){
					AD_list.form_data.id=$('#field_id option:eq(0)').val();
				}
				if(!this.form.type){
					AD_list.form_data.type=$('#field_id option:eq(0)').attr('data-type');
				}
			},List_Search:function(){
				this.Ad_List_Form()
				getData(AD_list,Ajax_Vue_Fun_List)
			}
		},watch:{
	        'form.month':function(val,oldval){
	            console.log('month_月份改变')
	            console.log(val,oldval)
	            AD_list_field_type.form_data.month=this.form.month;
	            //is_watch='month';
	            //this.List_Search()
	        },'form.store_id':function(val,oldval){
	            console.log('store_id_门店改变')
	            console.log(val,oldval)
	            console.log(oldval)
	            AD_list_field_type.form_data.store_id=this.form.store_id;
	            getData(AD_list_field_type,Ajax_Vue_Fun_Field_Type)
	            //this.List_Search()
	            //this.form.id=$('#field_id option:eq(0)').val();
	        },'form.field_key':function(key,oldval){
	            console.log('field_key_场地改变')
	            console.log(key,oldval)
	            console.log(oldval)
	            this.form.id=this.list_field_type[key-1].id;
	            this.form.type=this.list_field_type[key-1].type;
	            //this.List_Search()
	            //console.log(Option.attr('data-type'))
	            //this.form.type=Option.attr('data-type')
	        },'form.time':function(key,oldval){
	            console.log('time_时间改变')
	            console.log(key,oldval)
	            console.log(oldval)
	            //this.List_Search()
	        }
    	}
	})
	vm.form.store_id=$('#store_id option:eq(0)').val()
	
	AD_list_field_type.form_data.store_id=vm.form.store_id;
	//门店
	vm.lists_data.store_name=$('#store_id').find("option:selected").text()
	//场地类型
	vm.lists_data.type_text_num=$('#field_id').find("option:selected").text()
	vm.Ad_List_Form()
}
//场地
var Ajax_Vue_Fun_Field_Type=function(vue_data){
	vm.list_field_type=vue_data.list;
	vm.form.type=vm.list_field_type[0].type;
	vm.form.id=vm.list_field_type[0].id;
	vm.form.field_key=1;
}
//价格列表
var Ajax_Vue_Fun_List=function(vue_data){
	vm.lists=vue_data.list;
	vm.lists_data.type_text_num=$('#field_id').find("option:selected").text()
	vm.lists_data.length=vue_data.list.length;
	vm.lists_data.dev=1;
	//URL_Make(vm.form)
}
getData(AD_list_store,Ajax_Vue_Fun_Store)
</script>
@endsection

@endsection

